import {Component} from '@angular/core';
import {OverlayContainer} from '@angular/material';
import {trigger, state, transition, animate, style} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('square',
      [
        state('green', style({'background-color': 'green', 'transform': 'translateX(0)'})),
        state('red', style({'background-color': 'red', 'transform': 'translateX(100%)'})),
        transition('green => red', animate('1.5s 1s')),
        transition('red => green', animate(1000))
      ]
    )
  ]
})
export class AppComponent {
  darkTheme = false;

  squareState: string;

  constructor(private oc: OverlayContainer) {

  }

  switchTheme(dark) {
    this.darkTheme = dark;
    console.log(this.darkTheme);
    this.oc.themeClass = 'dark' ? 'myapp-dark-theme' : null;
  }

  onClick() {
    this.squareState = this.squareState === 'red' ? 'green' : 'red';
  }
}
